<template>
  <div>
    <MainHeader class="find-header"/>
    <nuxt class="find-content"/>
    <MainRight class="find-right"/>
    <MobileBottom class="find-bottom"/>
  </div>
</template>
<script>
  import MainHeader from '~/components/layout/main-header.vue'
  import MainLeft from '~/components/layout/main-left.vue'
  import MainRight from '~/components/layout/main-right.vue'
  import MobileBottom from '~/components/layout/mobile-bottom.vue'
  export default {
    data () {
      return {
      }
    },
    components: {
      MainHeader,
      MainLeft,
      MainRight,
      MobileBottom
    },
    beforeCreate: function () {
    },
    methods: {}
  }
</script>
<style>
  .find-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
  }

   .find-right {
    top: 60px;
  }

  .find-content {
    top: 65px;
    z-index: 1;
    position: absolute;
  }


  .find-right {
    position: absolute;
  }

  .find-bottom{
    display: none;
    position: fixed;
    z-index: 2;
    left: 0;
    background-color: #ffffff;
    width: 100%;
  }
  .find-bottom{
    bottom: 0;
  }


  @media all and (min-width: 1200px) {

    .find-content{
      width: 60.5%;
      left: 9%;
    }

    .find-right {
      width: 20%;
      left: 71%;
    }
  }
  /* 中小型笔记本或大平板 laptop */
  @media all and (min-width: 767px) and (max-width: 1200px) {

    .find-content{
      width: 66.5%;
      left: 4%;
    }

    .find-right {
      width: 25%;
      left: 71%;
    }
  }

  /* 手机或小平板 phone */
  @media all and (max-width: 766px) {
    .find-bottom{
      display: block;
    }
    .find-right,.find-header{
      display: none;
    }
    .find-content {
      width: 100%;
      left: 0;
    }
    .find-content{
      margin-bottom: 60px;
    }

    .find-content {
      top: 200px;
    }
  }



</style>
